<template>
  <view
    :style="`padding-top: ${safeareaTop <= 60 ? safeareaTop + 130 : safeareaTop}rpx`"
  >
    <Layout
      :bgColor="'background: linear-gradient(to bottom, #fff, #b8e2fa);'"
      :tab-id="3"
    >
      <template #content>
        <view class="w-[100vw] flex flex-col items-center">
          <view class="w-[90%] mt-10">
            <view class="w-[100%] my-2 flex items-center">
              <image
                :src="user.avatar || '/static/logo.png'"
                class="w-[120rpx] h-[120rpx] rounded-[50%]"
                mode="scaleToFill"
              />
              <view class="ml-2 flex flex-col justify-center">
                <text class="text-f text-[30rpx] font-bold">
                  {{ user.name || '用户' }}
                </text>
                <text
                  class="text-f text-[20rpx] md:text-[22rpx] text-[#7d7e80] mt-2"
                >
                  {{ user.phone || '未绑定' }}
                </text>
              </view>
            </view>
            <view
              class="w-[auto] p-3 shadow-[0_0_10rpx_rgba(0,0,0,0.2)] rounded-[15rpx] mt-6"
            >
              <view
                v-for="item in menuList"
                :key="item.name"
                size="30px"
                class="w-[100%] flex items-center justify-between my-2 py-[30rpx]"
                @click="navigateTo(item.path)"
              >
                <view>
                  <wd-icon :name="item.icon" color="#4f7dfd"></wd-icon>
                  <text class="text-f text-[16px] md:text-[18px] ml-3">{{
                    item.name
                  }}</text>
                </view>
                <wd-icon name="arrow-right" color="#4f7dfd"></wd-icon>
              </view>
            </view>
          </view>
        </view>
      </template>
    </Layout>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Layout from '@/components/Layout/tabLayout.vue'
import useStore from '@/store'
import { jumpTo } from '@/utils/unifunc'
import { onShow } from '@dcloudio/uni-app'
const store = useStore()

const user = computed(() => {
  return store.useUser.getUser
})

const safeareaTop = computed(() => {
  return store.useSafeArea.getSafeAreaTop
})

const menuList = ref([
  {
    name: '我的信息',
    icon: 'user-circle',
    path: '/pages/my/userProfile'
  },
  {
    name: '紧急联系人',
    icon: 'call',
    path: '/pages/my/linkPerson'
  },
  {
    name: '关于我们',
    icon: 'note',
    path: '/pages/my/aboutPage'
  },
  {
    name: '我的报修',
    icon: 'spool',
    path: '/pages/service/repiarList'
  },
  {
    name: '我的缴费',
    icon: 'bags',
    path: '/pages/service/costList'
  },
  {
    name: '退出登录',
    icon: 'logout',
    path: '/pages/index/loginPage'
  }
])

const navigateTo = (path?: string) => {
  if (path) {
    if (path === '/pages/index/loginPage') {
      store.useUser.clearUser()
    }
    jumpTo(path)
  }
}

onShow(() => {
  const user = store.useUser.getUser
  if (!user) {
    jumpTo('/pages/index/loginPage')
  }
})
</script>

<style lang="scss">
/* UnoCSS is assumed to be configured in the project, so utility classes like flex, items-center, etc., will work */
</style>
